<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>问答机器人</title>
</head>
<body>
	<div id="app">
		<div v-for="(item,index) in messageList" :key="index">
			 <div style="display: flex;">
			 	  <img src="" width="20" height="20"/>
				  <div v-html="item.q"></div>
			 </div>
		</div>
		<div>
			<input v-model="question"/> <button @click="search">确定</button>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
	<script>
	     var app = new Vue({
	       el: '#app',
	       data: {
	         message: 'Hello Vue!',
			 question:"",
			 messageList:[]
	       },
		   methods: {
		   	search() {
		   		this.message = "2"
				if (this.question) {
					this.messageList.push({
						q:this.question
					})
					// 向给定ID的用户发起请求
					axios.get(`https://6a5pjcme2x.hk.aircode.run/chat?question=${this.question}`)
					  .then((response)=> {
					    // 处理成功情况
					    console.log(response);
						this.messageList.push({
							q:response.data.reply
						})
					  })
					  .catch(function (error) {
					    // 处理错误情况
					    console.log(error);
					  })
					  .then(function () {
					    // 总是会执行
						console.log("总是会执行");
					  });
				} else{
					alert("请输入问题")
				}
				
		   	}
		   },
	     })
	</script>
</body>
</html>